<template>
  <div id="select_course">
    <div class="logo_header">
      <LogoHeader />
    </div>
    <div class="infos_header">
      <InfosHeader />
    </div>
    <div id="check_header">
      <h1>学生选课</h1>
    </div>

    <div id="main">
      <div v-if="display_hide">
        <ul>
          <li class="info" v-for="(info, index) in infos" :key="index">
            <el-main>
              <h2>{{ info.co_name }}</h2>
              <el-row>
                <el-col :span="4">
                  <div class="grid-content bg-purple">
                    <i class="el-icon-office-building"></i>
                    授课教师
                  </div>
                </el-col>
                <el-col :span="20">
                  <div class="grid-content bg-purple-light">
                    {{ info.te_name }}
                  </div>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="4">
                  <div class="grid-content bg-purple">
                    <i class="el-icon-office-building"></i>
                    学年
                  </div>
                </el-col>
                <el-col :span="4">
                  <div class="grid-content bg-purple-light">
                    {{ info.co_year }}
                  </div>
                </el-col>

                <el-col :span="4">
                  <div class="grid-content bg-purple">
                    <i class="el-icon-office-building"></i>
                    学期
                  </div>
                </el-col>
                <el-col :span="4">
                  <div class="grid-content bg-purple-light">
                    {{ info.co_term }}
                  </div>
                </el-col>

                <el-col :span="4">
                  <div class="grid-content bg-purple">
                    <i class="el-icon-office-building"></i>
                    学时
                  </div>
                </el-col>
                <el-col :span="4">
                  <div class="grid-content bg-purple-light">
                    {{ info.co_hour }}
                  </div>
                </el-col>
              </el-row>
              <!--  -->
              <el-row>
                <el-col :span="4">
                  <div class="grid-content bg-purple">
                    <i class="el-icon-office-building"></i>
                    课程介绍
                  </div>
                </el-col>
                <el-col :span="20">
                  <div class="grid-content bg-purple-light">
                    {{ info.co_information }}
                  </div>
                </el-col>
              </el-row>
              <div class="course_button">
                <router-link to="/st_select_class">
                  <el-button type="primary" @click="sendSeCoId(info.co_id)"
                    >添加班级</el-button
                  >
                </router-link>
              </div>
            </el-main>
          </li>
        </ul>
      </div>
      <div v-else>
        <el-empty description="没有可选的课程，请选课！"></el-empty>
      </div>
    </div>
  </div>
</template>

<script>
import LogoHeader from "../components/logo.vue";
import InfosHeader from "../components/infos_header.vue";
export default {
  inject: ["reload"],
  name: "st_select_course",
  components: {
    LogoHeader,
    InfosHeader,
  },
  data() {
    return {
      size: "",
      display_hide: true,
      infos: [
        {
          co_id: "",
          co_name: "",
          co_term: "",
          co_year: "",
          co_hour: "",
          co_information: "",
          te_name: "",
        },
      ],
    };
  },
  methods: {
    loadCourseData() {
      this.axios
        .get("http://10.197.43.62:8088/student/notcourse?st_id=" + this.st_id)
        .then((res) => {
          if (res.data != "") {
            this.display_hide = true;
            this.infos = res.data;
          } else {
            this.display_hide = false;
          }
        });
    },
    sendSeCoId(co_se_id) {
      localStorage.setItem("co_se_id", co_se_id);
      this.$store.dispatch("SET_CO_SE_ID", co_se_id);
    },
  },
  mounted() {
    this.loadCourseData();
  },
  computed: {
    st_id() {
      return this.$store.state.st_id;
    },
  },
};
</script>

<style scoped>
ul,
li {
  list-style: none;
}

a {
  text-decoration: none;
  outline: none;
  color: #000;
}

.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}

#select_course {
  z-index: -1;
  width: 100%;
  background-image: url(../assets/img/bg.jpg);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  overflow: hidden;
  min-height: 100vh;
  position: absolute;
}

/*  */
#check_header {
  padding: 30px 350px;
}

h1 {
  text-align: center;
  font-size: 40px;
}
.select_button {
  display: block;
  margin-left: 900px;
  font-size: 20px;
}
/*  */
#main {
  padding: 0 300px 20px;
}

h2 {
  font-size: 20px;
  text-align: center;
  padding: 20px;
}

.course_button {
  margin: 10px;
  float: right;
}
</style>
<style>
#select_course > #main .el-main {
  margin-bottom: 20px;
  background-color: #ecf5ff8f;
}

#select_course > #main .el-col {
  border: 1px solid #ebeef5;
  background: #fafafa;
  padding: 12px 10px;
  height: 47px;
}

#select_course > #main .grid-content {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

#select_course > #main .bg-purple {
  color: #909399;
}

#select_course > #main .el-button {
  margin-right: 3px;
}
</style>